center a css popup in the browser using javascript

[cmo]

What I'm trying to do is to display a loading screen while an ajax request executes. I have a page that is fairly long with several tables worth of data and the sorting/pagination of each table is handled by ajax requests.

I'd like to have a css div that is displayed in the center of the browser window when a user selects an operation that kicks off an ajax request.

What I have thus far is a div that shows up in the center of the "unscrolled" browser window when needed (by unscrolled I mean that if the user were to first hit the page and activate a link in the visible portion of the page - not one found via scrolling down - the div would appear centered in that visible area). The problem that I'm having is that, if the user scrolls down and selects a link the kicks off a request, the div still appears centered on the "top" portion of the page (the original, "unscrolled" portion). I want the pop up div to be displayed in the center of the "visible" area of the browser. Here's the javascript I have thus far:

function showIndicator(){
    var availHeight;
    var availWidth;
 
    if(typeof(window.innerWidth) == 'number'){
        availHeight = window.innerHeight;
        availWidth = window.innerWidth;
    }else if(document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)){
        availHeight = document.documentElement.clientHeight;
        availWidth = document.documentElement.clientWidth;
    }else if(document.body && (document.body.clientWidth || document.body.clientHeight)){
        availHeight = document.body.clientHeight;
        availWidth = document.body.clientWidth;
    }
 
    var indicatorWidth = 50;
    var indicatorHeight = 50;
    var left = (availWidth/2) - (indicatorWidth/2);
    var top = (availHeight/2) - (indicatorHeight/2);
    var indicator = document.getElementById('indicator');
    indicator.style.border="1px solid gray";
    indicator.style.background="white";
    indicator.style.position="absolute";
    indicator.style.zIndex="999";
    indicator.style.top=top+"px";
    indicator.style.left=left+"px";
    indicator.style.display="block";
}
 

I hope I was able to convey my intent and my problem - I'm quite new to javascript/dhtml/ajax so I'm mainly hacking away in the dark here.
-I've only tested this in firefox 2 and ie 6 thus far.
Thanks very much!

[cmo]

well, ended up figuring this one out after some more hacking,
added the following:

var yOffset
if (self.pageYOffset){// all except Explorer
    yOffset = self.pageYOffset;
}
else if (document.documentElement && document.documentElement.scrollTop)// Explorer 6 Strict{
    yOffset = document.documentElement.scrollTop;
}
else if (document.body){ // all other Explorers
    y = document.body.scrollTop;
}
...
var top = ((availHeight/2)+yOffset) - (indicatorHeight/2);
...
 

and that seems to work just fine.

[Romulo NF]

well, ended up figuring this one out after some more hacking,
added the following:

var yOffset
if (self.pageYOffset){// all except Explorer
    yOffset = self.pageYOffset;
}
else if (document.documentElement && document.documentElement.scrollTop)// Explorer 6 Strict{
    yOffset = document.documentElement.scrollTop;
}
else if (document.body){ // all other Explorers
    y = document.body.scrollTop;
}
...
var top = ((availHeight/2)+yOffset) - (indicatorHeight/2);
...
 

and that seems to work just fine.

I was doing more or less that some days ago
The code i used was something like

var x = self.pageYOffset ? self.pageXOffset : document.documentElement && document.documentElement.scrollTop ? document.documentElement.scrollLeft : document.body ? document.body.scrollLeft : null;
 
var y = self.pageYOffset ? self.pageYOffset : document.documentElement && document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body ? document.body.scrollTop : null;
 

[graphicguru]

Hai im looking for a css inner popup that need to be place along to the window adjustments,

for example : when we right click the mouse on screen where ever the mouse pointer is there option will display accourding to that.

look at this code and position the displaying popup according to the button click

[HTML]<html>
<head>
<title>Inner Popup using CSS</title>
<style type="text/css">
.popup
{
position:absolute; left:0; top:0; width:400px;
border-style:solid;
border-width:1px;
border-color:blue;
background-color:yellow;
padding:5px;
color:red;
font-family:Arial;
font-weight:bold;
font-size:10pt;
z-index:2;
visibility:hidden;
}
</style>
<script language="JavaScript">
function ShowPop(id)
{
document.getElementById(id).style.visibility = "visible";
}
function HidePop(id)
{
document.getElementById(id).style.visibility = "hidden";
}
</script>
</head>
<body>
<table width="100%" class="frm" border=1>
<tr colspan=3>Inner POPUp using CSS
</tr>
<tr>
<td>
<span style="position:relative; background-color:#33d;">
<span id="example" class="popup">
<pre>&lt;script language="JavaScript"&gt;
function ShowPop(id)
{
document.getElementById(id).style.visibility = "visible";
}
function HidePop(id)
{
document.getElementById(id).style.visibility = "hidden";
}
&lt;/script&gt;
<input id="butt" type="button" onClick="HidePop('example');" value="Close" /></pre>
</span>
<input id="butt" type="button" onClick="javascript:void(0);ShowPop('example');" value="click"/></span>
</td>
<td>
<span style="position:relative; background-color:#33d;">
<span id="example" class="popup">
<pre>&lt;script language="JavaScript"&gt;
function ShowPop(id)
{
document.getElementById(id).style.visibility = "visible";
}
function HidePop(id)
{
document.getElementById(id).style.visibility = "hidden";
}
&lt;/script&gt;
<input id="butt" type="button" onClick="HidePop('example');" value="Close" /></pre>
</span>
<input id="butt" type="button" onClick="javascript:void(0);ShowPop('example');" value="Click" /></span>
</td><td>
<span style="position:relative; background-color:#33d;">
<span id="example" class="popup">
<pre>&lt;script language="JavaScript"&gt;
function ShowPop(id)
{
document.getElementById(id).style.visibility = "visible";
}
function HidePop(id)
{
document.getElementById(id).style.visibility = "hidden";
}
&lt;/script&gt;
<input id="butt" type="button" onClick="HidePop('example');" value="Close" /></pre>
</span>
<input id="butt" type="button" onClick="javascript:void(0);ShowPop('example');" value="Click" /></span>
</td>
</tr>
</table>
</body>
</html>[/HTML]

plz find the solution for this, i have to give this to my programmers, who are not able to fix this

[acoder]

See if you find this article useful.